<template>
  <div>
    <div
      v-for="(item, key) in data"
      :key="key"
    >
      <h2 @click="expand(item)">{{key}}</h2>
      <ul v-if="item.expand" class="content">
        <li
          v-for="(sub, index) in item"
          :key="index"
          @click="setCheck(sub.id)"
        >
          <input type="checkbox" :value="sub.id"/>{{sub.feilei}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  data() {
    return {
      data: {
        x1: [
          { id: 0, name: 'x01', feilei: 'x1' },
          { id: 1, name: 'x02', feilei: 'x1' },
          { id: 2, name: 'x03', feilei: 'x1' },
          { id: 3, name: 'x04', feilei: 'x1' }
        ],
        x2: [
          { id: 4, name: 'x001', feilei: 'x2' },
          { id: 5, name: 'x002', feilei: 'x2' }
        ],
        x3: [
          { id: 6, name: 'x0001', feilei: 'x3' },
          { id: 7, name: 'x0002', feilei: 'x3' },
          { id: 8, name: 'x0003', feilei: 'x3' }
        ],
        x4: [
          { id: 9, name: 'x00001', feilei: 'x4' },
          { id: 10, name: 'x00002', feilei: 'x4' },
          { id: 11, name: 'x00003', feilei: 'x4' }
        ],
        x5: [
          { id: 12, name: 'x000001', feilei: 'x5' },
          { id: 13, name: 'x000002', feilei: 'x5' },
          { id: 14, name: 'x000003', feilei: 'x5' }
        ],
        x6: [
          { id: 15, name: 'x0000001', feilei: 'x6' },
          { id: 16, name: 'x0000002', feilei: 'x6' },
          { id: 17, name: 'x0000003', feilei: 'x6' }
        ]
      }
    };
  },
  methods: {
    expand(data) {
      console.log(data);
      this.$set(data, 'expand', !data.expand);
    },
    setCheck(id) {
      alert(id);
    }
  }
};
</script>

<style lang="less" scoped>
</style>
